<template>
  <div class="body">
    <div class="header-title">
      <div class="text">电影数据监控</div>
    </div>
    <div class="header">
      <div id="top-left" class="boxtop" style="padding:0;height:272px">
        <div class="boxfoot"></div>
        <el-row :gutter="20" class="top-title-text" style="padding:12px 0 0 12px">
          <el-col :span="6">电影名</el-col>
          <el-col :span="4">导演</el-col>
          <el-col :span="4">主演</el-col>
          <el-col :span="4">类型</el-col>
          <el-col :span="3">评分</el-col>
          <el-col :span="3">票房(元)</el-col>
        </el-row>
        <vue-seamless-scroll
          v-if="piaoFangData.length>0"
          :data="piaoFangData"
          class="seamless-warp"
          :class-option="defaultOption"
          style="margin-top:12px"
        >
          <ul>
            <li v-for="(item,index) in piaoFangData" :key="index" style="padding:6px 0 6px 12px;">
              <el-row :gutter="20">
                <el-col :span="6">
                  <div style="display:flex">
                    <span class="mingci">{{index+1}}.</span>
                    <span>{{item.name}}</span>
                  </div>
                </el-col>
                <el-col :span="4">{{item.director}}</el-col>
                <el-col :span="4">{{item.actor}}</el-col>
                <el-col :span="4">{{item.type}}</el-col>
                <el-col
                  :span="3"
                  v-if="item.score!==null"
                  :style="item.score>5?'color:#00ea37':'color:red'"
                >{{item.score}} 分</el-col>
                <el-col :span="3" v-else>暂无评分</el-col>
                <el-col :span="3">{{item.price}}</el-col>
              </el-row>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <div class="boxtop" style="margin-right:0">
        <div class="boxfoot"></div>
        <div class="xihuanNum">收藏人数</div>
        <div id="wishChart"></div>
      </div>
    </div>
    <div class="header" style="padding-top:0">
      <div class="boxtop" style="flex:1">
        <div class="boxfoot"></div>
        <div class="xihuanNum">电影热度</div>
        <div style="width:100%;height: 230px;" id="echart2"></div>
      </div>
      <div class="boxtop" style="margin-right:0">
        <div class="boxfoot"></div>
        <div class="xihuanNum">电影评分</div>
        <div style="width:400px;height: 230px;" id="echart3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { getLikeMovie, getAllMovieXX, getScoreMovie } from '../../../api/index'
export default {
  name: 'Welcome',
  props: {},
  components: {
    vueSeamlessScroll,
  },
  computed: {
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 28, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  data() {
    return {
      data: [],
      piaoFangData: [], //左上角票房数据集
      scoreData: [], //打分
      scoreNameData: [], //打分的电影名字
      hotData: [],
      hotxData: [], //电影热度数据
      hotyData: [], //电影热度数据
    }
  },
  mounted() {
    this.showChart()
    this.getData()
  },
  methods: {
    async showChart() {
      const res = await getLikeMovie()
      if (res.success_code === 200) {
        const result = res.data.slice(0, 6)
        this.data = result.map((item) => {
          return {
            name: item.name,
            value: item.wish_num,
          }
        })
      } else {
        this.$message.error('请求数据出错！')
      }
      // 基于准备好的dom，初始化echarts实例
      let wishChart = this.$echarts.init(document.getElementById('wishChart'))
      // 绘制图表
      wishChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function (param) {
            return (
              '<div style=" "> ' +
              param.marker +
              param.name +
              '<br>' +
              param.marker +
              '收藏数：' +
              param.value +
              '人</div>'
            )
          },
          backgroundColor: 'rgba(0,0,0,0.6)', //通过设置rgba调节背景颜色与透明度
          borderWidth: '1',
          borderColor: 'rgba(0,0,0,0.6)',
          textStyle: {
            color: '#fff',
          },
        },

        legend: {
          //左边个数
          orient: 'vertical',
          left: '0',
          top: '15%',
          textStyle: {
            color: 'rgba(255,255,255,0.8)',
            fontWeight: 600,
            width: '120',
            overflow: 'truncate', //超出隐藏
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['65%', '45%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            itemStyle: {
              borderRadius: 4,
              // borderColor: '#fff',
              // borderWidth: 2,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            labelLine: {
              show: false,
            },
            data: this.data,
          },
        ],
      })
      const hotData = await getAllMovieXX()
      if (hotData.success_code === 200) {
        let data = hotData.data
        let hot = 0 //热度
        for (let i = 0; i < data.length - 1; i++) {
          if (data[i].name === data[i + 1].name) {
            hot += data[i].ticket_num
          } else {
            hot += data[i].ticket_num
            this.hotData.push({
              name: data[i].name,
              hot: hot,
            })
            hot = 0
          }
        }
        // 排序
        this.hotData.sort(function (a, b) {
          return b.price - a.price
        })
      } else {
        this.$message.error('请求数据出错！')
      }
      // 排序
      this.hotData.sort(function (a, b) {
        return b.hot - a.hot
      })
      //电影热度
      this.hotxData = this.hotData.map((item) => {
        return item.name
      })
      this.hotyData = this.hotData.map((item) => {
        return item.hot
      })
      let myChart = this.$echarts.init(document.getElementById('echart2'))
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.6)', //通过设置rgba调节背景颜色与透明度
          borderWidth: '1',
          borderColor: 'rgba(0,0,0,0.6)',
          textStyle: {
            color: '#fff',
          },
        },
        grid: {
          right: 20,
          top: 20,
          left: 20,
          bottom: 20,
        },
        xAxis: {
          data: this.hotxData,
          axisLabel: {
            interval: 0, //所有显示
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.6)',
            },
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.6)',
            },
          },
        },
        dataZoom: {
          start: 40,
          type: 'inside',
        },
        series: {
          name: '热度',
          type: 'bar',
          data: this.hotyData,
          itemStyle: {
            //渐变色
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#01fdcc',
                },
                {
                  offset: 0.8,
                  color: '#11a1d8',
                },
              ],
              false
            ),
          },
        },
      })
      //评分
      const res3 = await getScoreMovie()
      if (res3.success_code === 200) {
        const result = res3.data.slice(0, 6)
        this.scoreData = result.map((item) => {
          return {
            value: item.score,
          }
        })
        this.scoreNameData = result.map((item) => {
          return item.name
        })
      } else {
        this.$message.error('请求数据出错！')
      }
      var myChart2 = this.$echarts.init(document.getElementById('echart3'))
      myChart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B',
            },
          },
          // formatter: '{b}:{c}分',
          formatter: function (params) {
            return (
              '<div> ' +
              params[0].marker +
              params[0].name +
              ':' +
              params[0].value +
              '分</div>'
            )
          },
          backgroundColor: 'rgba(0,0,0,0.6)', //通过设置rgba调节背景颜色与透明度
          borderWidth: '1',
          borderColor: 'rgba(0,0,0,0.6)',
          textStyle: {
            color: '#fff',
          },
        },

        grid: {
          left: '0',
          right: '20',
          top: '20',
          bottom: '0',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval: 1, //各一个显示一个
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,.6)',
              },
            },
            data: this.scoreNameData,
          },
        ],
        yAxis: [
          {
            axisLabel: {
              show: true,
              // textStyle: {
              color: 'rgba(255,255,255,.6)',
              // },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: 'dotted',
                color: 'rgba(255,255,255,.1)',
              },
            },
          },
        ],
        series: [
          {
            name: '评分',
            type: 'line',
            //smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            //showSymbol: false,
            lineStyle: {
              // normal: {
              // width: 2,
              // },
            },

            areaStyle: {
              // normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(98, 201, 141, 0.5)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(98, 201, 141, 0.1)',
                  },
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10,
              // },
            },
            itemStyle: {
              // normal: {
              color: '#4cb9cf',
              borderColor: 'rgba(98, 201, 141,0.27)',
              borderWidth: 12,
              // },
            },
            data: this.scoreData,
          },
        ],
      })
    },
    async getData() {
      // 票房排名
      const res = await getAllMovieXX()
      if (res.success_code === 200) {
        let data = res.data
        let sum = 0 //票房
        let hot = 0 //热度
        for (let i = 0; i < data.length - 1; i++) {
          if (data[i].name === data[i + 1].name) {
            sum += data[i].ticket_total_price
            hot += data[i].ticket_num
          } else {
            sum += data[i].ticket_total_price
            hot += data[i].ticket_num
            this.piaoFangData.push({
              name: data[i].name,
              director: data[i].director,
              actor: data[i].actor,
              type: data[i].type,
              score: data[i].score,
              price: sum,
              hot: hot,
            })
            sum = 0
            hot = 0
          }
        }
        // 排序
        this.piaoFangData.sort(function (a, b) {
          return b.price - a.price
        })
      } else {
        this.$message.error('请求数据出错！')
      }
    },
  },
}
</script>
<style lang="stylus"  scoped>
.body {
  background: url('../images/bg.jpg') center center;
  background-size: cover;
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.seamless-warp {
  height: 220px;
  overflow: hidden;
}

.xihuanNum {
  background: linear-gradient(to right, rgba(48, 82, 174, 1), rgba(48, 82, 174, 0));
  color: #fff;
  font-size: 16px;
  padding: 4px;
}

.seamless-warp li:hover {
  cursor: pointer;
  background: rgba(2, 36, 167, 0.3);
}

.top-title-text {
  padding-bottom: 12px;
  color: #3486da;
  font-weight: 600;
  font-size: 16px;
}

.mingci {
  padding-right: 4px;
}

.header-title {
  height: 60px;
  background: url('../images/head_bg.png') no-repeat center center;
  background-size: 100% 100%;
  position: relative;

  .text {
    color: #bde4ff;
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    letter-spacing: 10px;
  }
}

.header {
  display: flex;
  padding: 15px 20px;

  #top-left {
    flex: 1;
  }

  .boxtop {
    height: 260px;
    margin-right: 22px;
    padding: 12px 0 0 12px;
    border: 1px solid #3486da;
    background: rgba(0, 70, 190, 0.1);
    position: relative;
    z-index: 10;
  }

  .boxtop:before, .boxtop:after {
    position: absolute;
    width: 15px;
    height: 15px;
    content: '';
    border-top: 3px solid #3486da;
    top: -2px;
  }

  .boxfoot:before, .boxfoot:after {
    position: absolute;
    width: 15px;
    height: 15px;
    content: '';
    border-bottom: 3px solid #3486da;
    bottom: -2px;
  }

  .boxtop:before, .boxfoot:before {
    border-left: 3px solid #3486da;
    left: -2px;
  }

  .boxtop:after, .boxfoot:after {
    border-right: 3px solid #3486da;
    right: -2px;
  }

  .boxfoot {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
  }

  #wishChart {
    width: 400px;
    height: 260px;
  }
}

.flex {
  display: flex;
  justify-content: space-between;
}
</style>
